<template>
  <main class="mission_planing_container">
    <h2>知识查询</h2>
    <header class="flex flex-between">
      <div class="aside">
        <el-form
          :inline="true"
          :model="queryParams"
          class="demo-form-inline"
          size="small"
        >
          <el-form-item label="">
            <el-select
              v-model="queryParams.type"
              placeholder="请选择节点"
              clearable
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input
              v-model="queryParams.condition"
              v-max-length-tip="30"
              v-no-space
              clearable
              placeholder="输入节点或关系的关键词"
            ></el-input>
          </el-form-item>
          <el-form-item label="跳数">
            <el-select
              v-model="queryParams.skip"
              placeholder="请选择节点"
              clearable
            >
              <el-option
                v-for="(item, index) in JumpCountList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </header>
    <!--    表格内容-->
    <el-divider></el-divider>
    <main class="table_container">
      <el-row>
        <el-col :sm="24" :xs="24" :lg="4">
          <el-tree
            class="table_container_left"
            :data="treedata"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </el-col>
        <el-col :sm="24" :xs="24" :lg="20">
          <div class="table_container_right">
            <G6Editor
              mode="edit"
              :iseditable="false"
              :data="allNodeData"
            ></G6Editor>
          </div>
        </el-col>
      </el-row>
    </main>
  </main>
</template>

<script src="./index.js"></script>
<style lang="scss" src="./index.scss" scoped></style>
